<template>
  <div id="Main">
    <!-- <my-msg/> -->
    <el-container style="height: 100vh;">
      <el-header>
        <my-header/>
      </el-header>
      <el-container>
        <el-aside width="15rem">
          <vue-scrollbar style="max-height: calc(100vh - 60px);">
            <my-menu/>
          </vue-scrollbar>
        </el-aside>
        <el-main>
          <vue-scrollbar style="max-height: calc(100vh - 100px);">
            <div></div>
            <transition name="fade">
              <router-view/>
            </transition>
          </vue-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.el-header {
  background-color: #50c28b;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  background-color: rgb(238, 241, 246);
}

.fade-enter-active{
  transition: opacity .5s;
}
.fade-enter /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

<script>
import MyHeader from "@/components/MyHeader";
import MyMenu from "@/components/MyMenu";
// import MyMsg from "@/components/MyMsg";

import VueScrollbar from "vue2-scrollbar";
import "vue2-scrollbar/dist/style/vue2-scrollbar.css";

export default {
  name: "Main",
  components: {
    MyHeader,
    MyMenu,
    // MyMsg,
    VueScrollbar
  },
  data() {
    return {};
  }
};
</script>
